<template>
    <div style="float: right;right: 80px;position: absolute;width: 300px">
        <el-input
            v-model="search"
            @focus="focus"
            @blur="blur"
            @keyup.enter.native="searchLike(null)"
            placeholder="搜索商家或地点"
        >
            <el-button slot="append" icon="el-icon-search" id="search" @click="searchLike(1)"></el-button>
        </el-input>
        <!---设置z-index优先级,防止被走马灯效果遮挡-->
        <el-card
            @mouseenter="enterSearchBoxHanlder"
            v-if="isSearch"
            class="box-card"
            id="search-box"
            style="position:relative;z-index:15; line-height: 40px"
        >
            <dl v-if="isHistorySearch" style="text-align: left;">
                <dt class="search-title" v-show="history" style="line-height: 50px">历史搜索</dt>
                <dt class="remove-history" v-show="history" @click="removeAllHistory">
                    <i class="el-icon-delete">清空历史记录</i>
                </dt>
<!--                <TransitionGroup name="list" tag="el-tag">-->
                    <el-tag
                        v-for="(search1,index) in historySearchList"
                        :key="index"
                        closable
                        :type="search1.type"
                        @close="closeHandler(index)"
                        style="margin-right:5px; margin-bottom:5px;"
                        @click="search = search1.name;searchLike(search1.name)"
                    >{{search1.name}}</el-tag>
                <dt class="search-title" style="line-height: 50px">热门搜索</dt>
                <el-button
                    v-for="(search2,index) in hotSearchList"
                    :key="search2.name"
                    style="margin-right:5px; color: #606266"
                    type="text"
                    @click="search = search2.name;searchClick(search2)"
                >{{search2.shopname}}</el-button>
            </dl>
            <dl v-if="isSearchList">
                <dd v-for="search3 in searchList"
                    :key="search3.sid"
                    style="text-align: left; height: 30px"
                    @click="search = search3.name;searchClick(search3)">
                    {{search3.shopname}}</dd>
            </dl>
        </el-card>
    </div>
</template>

<script>
import RandomUtil from "@/utils/randomUtil";
import Store from "@/utils/store";
import storeSearch from "@/api/storeSearch";

export default {
    data() {
        return {
            search: "", //当前输入框的值
            isFocus: false, //是否聚焦
            hotSearchList: ["暂无热门搜索"], //热门搜索数据
            historySearchList: [], //历史搜索数据
            searchList: ["暂无数据"], //搜索返回数据,
            history: false,
            types: ["", "success", "info", "warning", "danger"] //搜索历史tag式样
        };
    },
    methods: {
        tag(){
            var datas = Store.loadHistory();
            if (datas != null && datas.length !== 0){
                if (datas.length > 5){
                    this.historySearchList = datas.slice(0,5);
                }else{
                    this.historySearchList = datas;
                }
            }else{
                this.historySearchList = [];
            }
            this.history = this.historySearchList.length !== 0;
        },
        searchLike(val){
            storeSearch.search(this.search).then((response)=>{
                this.searchList = response.data.data;
                if (val !== null){
                    this.searchHandler();
                }
            });
        },
        hotSearch(){
            storeSearch.searchAll().then((response)=>{
                if (response.data.data.length!==0){
                    this.hotSearchList = response.data.data.slice(0,8);
                }
            });
        },
        focus() {
            this.isFocus = true;
            this.tag();
            if (this.hotSearchList == null){
                this.hotSearch();
            }
            if (this.hotSearchList == null){
                this.hotSearchList = ["暂无热门搜索"]
            }
            this.searchLike(null);
        },
        blur() {
            var self = this;
            this.searchBoxTimeout = setTimeout(function() {
                self.isFocus = false;
            }, 300);
        },
        enterSearchBoxHanlder() {
            clearTimeout(this.searchBoxTimeout);
        },
        searchHandler() {
            //随机生成搜索历史tag式样
            let n = RandomUtil.getRandomNumber(0, 5);
            if (Store.loadHistory() != null){
                this.historySearchList = Store.loadHistory();
            }
            if (this.historySearchList[0].name !== this.search){
                console.log(this.search+"---"+this.types[n]+"----"+n)
                this.historySearchList.unshift({ name: this.search, type: this.types[n] });
                Store.saveHistory(this.historySearchList);
                this.tag();
            }
            this.history = this.historySearchList.length !== 0;
            var One = JSON.stringify(this.searchList);
            console.log(this.searchList,123321123)
            this.$router.push('/searchList/'+encodeURIComponent(One));
        },
        closeHandler(search) {
            this.historySearchList = Store.loadHistory();
            this.historySearchList.splice(search, 1);
            Store.saveHistory(this.historySearchList);
            this.tag();
            clearTimeout(this.searchBoxTimeout);
            if (this.historySearchList.length === 0) {
                this.history = false;
            }
        },
        removeAllHistory() {
            Store.removeAllHistory();
            this.historySearchList = [];
        },
        searchClick(searchObj){//随机生成搜索历史tag式样
            let n = RandomUtil.getRandomNumber(0, 5);
            let exist = this.historySearchList.filter(value => {
                return value.name ===  searchObj.shopname;
            }).length !== 0;
            if (!exist) {
                if (Store.loadHistory() != null){
                    this.historySearchList = Store.loadHistory();
                }
                console.log( searchObj.shopname+"---"+this.types[n]+"----"+n)
                this.historySearchList.unshift({ name:  searchObj.shopname, type: this.types[n] });
                Store.saveHistory(this.historySearchList);
                this.tag();
            }
            this.history = this.historySearchList.length !== 0;
            this.isFocus = false;
            var One = JSON.stringify(searchObj);
            this.$router.push('/storeShow/'+encodeURIComponent(One));
        }
    },
    computed: {
        isHistorySearch() {
            return this.isFocus && !this.search;
        },
        isSearchList() {
            return this.isFocus && this.search;
        },
        isSearch() {
            return this.isFocus;
        }
    },
    watch: {
        search: function (val) {
            if (val !== ""){
                this.searchLike(null);
            }
        }
    },
    created() {
        this.hotSearch()
    }
};
</script>

<style>
#search {
    background-color: #ffc300;
    border-radius: 0;
}
.search-title {
    color: #bdbaba;
    font-size: 15px;
    margin-bottom: 5px;
}
.remove-history {
    color: #bdbaba;
    font-size: 15px;
    float: right;
    margin-top: -47px;

}
#search-box {
    width: 370px;
    margin-top: 0;
    padding-bottom: 20px;
}
.list-enter-active,
.list-leave-active {
    transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
    opacity: 0;
    transform: translateX(30px);
}
</style>